
<!DOCTYPE html>
<html>
    <head>
        <title>Add and Remove Schedule Task</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0;
                margin: 0;                
            }            
            .formpane {
                top: 10px;
                right: 10px;   
                background: rgba(255, 255, 255, 0.85);
            }    
        </style>    
                               
        <script src="../../../../lib/core/ht.js"></script> 
        <script src="../../../../lib/plugin/ht-obj.js"></script> 
        <script src="../../../../lib/plugin/ht-form.js"></script> 
              
        <script>
            function getRawText(obj){
                var text = String(obj); 
                return text.substring(14, text.length-3);
            }            
        </script>                 
        <script src="mac.mtl.js"></script> 
        <script src="mac.obj.js"></script>                 
        <script>                                        

            function init(){
                ht.Default.setImage('texture', '');
                
                dataModel = new ht.DataModel();
                                
                g3d = new ht.graph3d.Graph3dView(dataModel);    
                g3d.setEye(200, 200, 200);
                g3d.setCenter(0, 100, 0);
                g3d.setGridVisible(true);    
                g3d.getView().style.background = '#37374C';                 
                g3d.addToDOM();
                
                formPane = new ht.widget.FormPane();  
                formPane.getView().className = 'formpane';
                document.body.appendChild(formPane.getView());                                              
                
                blinkTask = {
                    interval: 500,
                    action: function(data){
                        if(data !== mac){
                            return;
                        }                
                        if(data.a('screen.color') === 'red'){
                            data.a('screen.color', undefined);
                        }else{
                            data.a('screen.color', 'red');
                        }
                    }        
                };
                dataModel.addScheduleTask(blinkTask); 

                scaleTask = {
                    interval: 40,
                    action: function(data){   
                        if(data !== mac){
                            return;
                        }
                        var shrink = data.a('scale.shrink'),
                            value = data.a('scale.value'),
                            s3 = data.a('scale.s3');
                        if(shrink){
                            value -= 0.02;
                            if(value < 0.94){
                                value = 0.94;
                                data.a('scale.shrink', false);
                            }                            
                        }else{
                            value += 0.02;
                            if(value > 1.06){
                                value = 1.06;
                                data.a('scale.shrink', true);
                            } 
                        }
                        data.a('scale.value', value); 
                        data.s3(s3[0]*value, s3[1]*value, s3[2]*value);                                           
                    }
                };
                dataModel.addScheduleTask(scaleTask); 
                
                rotationTask = {
                    interval: 50,
                    action: function(data){
                        if(data !== mac){
                            return;
                        }
                        mac.setRotation(mac.getRotation() + Math.PI/20);
                    }        
                };
                dataModel.addScheduleTask(rotationTask);                
                
                initDataModel();                
                initFormPane();                 
            }            

            function initDataModel(){
                
                // desktop
                ht.Default.setShape3dModel('desktop', ht.Default.createRingModel([
                    0, 105,
                    80, 105,
                    80, 100,
                    5, 100,
                    5, 5,
                    40, 5,
                    40, 0,
                    0, 0
                ], null, 20, false, false, 50));     
                var desktop = new ht.Node();
                desktop.s({
                    '3d.selectable': false,
                    'shape3d': 'desktop',
                    'shape3d.image': 'texture',
                    'shape3d.uv.scale': [3, 2]
                });
                desktop.s3(1, 1, 1);
                dataModel.add(desktop);
                                               
                // load mac 3d model
                var params = {
                    s3: [100, 100, 100],
                    cube: true,
                    shape3d: 'mac'
                }; 
                var modelMap = ht.Default.parseObj(mac_obj, mac_mtl, params);                
                var rawS3 = params.rawS3;
                modelMap['LCD'].color = { func: 'attr@screen.color' };                                           
                    
                mac = new ht.Node();
                mac.p3(0, 108, 0);                 
                mac.s3(rawS3); 
                mac.s({
                   'shape3d': 'mac' 
                });
                mac.a({
                    'screen.color': 'red',                                                               
                    'scale.shrink': false,
                    'scale.value': 1,
                    'scale.s3': rawS3
                });
                dataModel.add(mac);
            }

            function initFormPane(){ 
                formPane.setWidth(150);
                formPane.setHeight(90);
                
                formPane.addRow([
                    {
                        checkBox: {
                            label: 'Enable Blink',                 
                            selected: true,
                            onValueChanged: function(){
                                if(this.isSelected()){
                                    dataModel.addScheduleTask(blinkTask);
                                }else{
                                    dataModel.removeScheduleTask(blinkTask);
                                    mac.a({ 'screen.color': 'red' });
                                }
                            }
                        }
                    }
                ], [0.1]);  
                
                formPane.addRow([
                    {
                        checkBox: {
                            label: 'Enable Scale',                 
                            selected: true,
                            onValueChanged: function(){
                                if(this.isSelected()){
                                    dataModel.addScheduleTask(scaleTask);
                                }else{
                                    dataModel.removeScheduleTask(scaleTask);
                                    mac.s3(mac.a('scale.s3'));
                                    mac.a({                                                              
                                        'scale.shrink': false,
                                        'scale.value': 1                                        
                                    });                                    
                                }
                            }
                        }
                    }
                ], [0.1]);   
                
                formPane.addRow([
                    {
                        checkBox: {
                            label: 'Enable Rotation',                 
                            selected: true,
                            onValueChanged: function(){
                                if(this.isSelected()){
                                    dataModel.addScheduleTask(rotationTask);
                                }else{
                                    dataModel.removeScheduleTask(rotationTask);
                                }
                            }
                        }
                    }
                ], [0.1]);                 

            }                                                            
            
        </script>
    </head>
    <body onload="init();">
    </body>
</html>
